<script setup>
import './style.css'
import {useRouter} from 'vue-router'
import {onMounted, reactive,ref} from "vue";
import userStore from "../../store/user.js";
import {ElMessage} from "element-plus";
import {socket} from "../../util/websocket.js";
import {avatar} from "./avatar.js";

const LoginValue = reactive({
// 用户基本数据
  UserForm:{
    username: '',
    detail: '',
    avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
  }
})
const router = useRouter()
const user = userStore()
/**
 * 选择头像
 * @event click点击事件
 * @param url
 * @return {string} LoginValue.UserForm.avatar
 */
const handleAvatarClick = (url) => {
  LoginValue.UserForm.avatar = url
}
onMounted(() => {
  ElMessage({
    message: '点击头像框选择头像，并填写相关信息',
    type: 'success'
  })
})

// 点击进入聊天按钮
const onSubmit = () => {
  try {
    if (!LoginValue.UserForm.username || !LoginValue.UserForm.detail) {
      ElMessage({
        message: '请输入完整信息',
        type: 'error'
      })
      return
    }
    if (LoginValue.UserForm.avatar === '') {
      ElMessage({
        message: '请选择头像',
        type: 'error'
      })
      return
    }
    if (LoginValue.UserForm.username.length > 5) {
      ElMessage({
        message: '昵称不能超过5个字',
        type: 'error'
      })
      return
    }
    if (LoginValue.UserForm.detail.length > 15) {
      ElMessage({
        message: '个性签名不能超过15个字',
        type: 'error'
      })
      return
    }
    // 判断socket是否链接，如果没有重新连接
    if (!socket.connected) {
      socket.connect()
    }
    socket.emit('login', {
      username: LoginValue.UserForm.username,
      avatar: LoginValue.UserForm.avatar,
      detail: LoginValue.UserForm.detail
    })
    socket.on('res_login', data => {
      if (data.code === 1) {
        ElMessage({
          message: data.msg,
          type: 'error'
        })

      } else if (data.code === 0) {
        ElMessage({
          message: data.msg,
          type: 'success'
        })

        // 获取用户信息
        user.setUserInfo({
          username: LoginValue.UserForm.username,
          avatar: LoginValue.UserForm.avatar,
          detail: LoginValue.UserForm.detail
        })
        sessionStorage.setItem('userInfo', JSON.stringify({
          username: LoginValue.UserForm.username,
          avatar: LoginValue.UserForm.avatar,
          detail: LoginValue.UserForm.detail
        }))
        router.push('/app')
      }
    })

  } catch (e) {
    ElMessage({
      message: '发生未知错误，请刷新页面重新登录',
      type: 'error'
    })
  }
}
</script>

<template>
  <div class="box">
    <div class="forms">
      <div class="tips">
        <span class="login-btn">登录</span>
      </div>
      <div class="login">
        <div class="form-title">
          <h4>欢迎来到HappyChat聊天室</h4>
        </div>
        <div class="form">
          <div class="avatar_login">
            <el-popover placement="right" :width="400" trigger="hover">
              <template #reference>
                <el-avatar shape="square" :size="60"
                           :src="LoginValue.UserForm.avatar"/>
              </template>
              <div>
                <p>选择你的头像</p>
                <div class="avatar_content">
                  <p v-for="item in avatar" :key="item.id">
                    <img class="imgItem" :src="item.url" alt="item.url" @click="handleAvatarClick(item.url)">
                  </p>
                </div>
              </div>
            </el-popover>
          </div>
          <div class="username input-item">
            <input type="text" v-model="LoginValue.UserForm.username"  class="ipts">
          </div>
          <div class="password input-item">
            <input type="text" v-model="LoginValue.UserForm.detail" class="ipts">
          </div>
          <div class="other-select">
            <div class="rem-pwd">
              <input type="checkbox" id="check">
              <label for="check" class="rem-pwd-tips">记住密码</label>
            </div>
            <span class="fogot-pwd-btn">忘记密码</span>
          </div>
          <button class="btn" @click="onSubmit">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>